<template>
  <div class="box">
    
    <van-nav-bar
  title="幸运咖"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<h3>您还可以抽奖 {{ count }} 次</h3>
  <div v-cloak>
    <div class="container">
      <div class="prize-list" ref="prizeWrap" :style="bgColor">
        <div class="prize-item" v-for="(item, index) in state.prizeList" :style="prizeStyle(index)">
          <img :src="item.pic" alt="">
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="btn" @click="start"></div>
    </div>
  </div>
  <!-- 弹出框 -->
  <van-dialog v-model:show="show" title="中奖详情" show-cancel-button  @confirm="showSuccessToast('已添加至中奖列表');">
  <img :src="list.pic" />
</van-dialog>
  </div>
 
</template>

<script setup>
import { createApp, onMounted, onUnmounted, ref, reactive, toRefs, computed, nextTick } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';

const count = ref(3)
const list = ref([])
const state = reactive({
  prizeList: [
    { name: '手机', pic: 'https://img14.360buyimg.com/n1/s350x467_jfs/t1/96484/4/38238/59532/64561362Fb60a64d3/cb410aeb2dffc060.jpg!cc_350x467' },
    { name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },
    { name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },
    { name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },
    { name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },
    { name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },
    { name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },
    { name: '玫瑰', pic: 'https://img1.baidu.com/it/u=1125656938,422247900&fm=253&fmt=auto&app=120&f=JPEG' }
  ], // 后台配置的奖品数据
  isRunning: false, // 是否正在抽奖
  baseRunAngle: 360 * 5, // 总共转动角度 至少5圈
  prizeId: 0, // 中奖id
})
const prizeWrap = ref(null)


// 平均每个奖品角度
const rotateAngle = computed(() => {
  const _degree = 360 / state.prizeList.length
  return _degree
})

// 要执行总角度数
const totalRunAngle = computed(() => {
  return state.baseRunAngle + 360 - state.prizeId * rotateAngle.value - rotateAngle.value / 2
})

// 计算绘制转盘背景
const bgColor = computed(() => {
  const _len = state.prizeList.length
  const colorList = ['#5352b3', '#363589']
  let colorVal = ''
  for (let i = 0; i < _len; i++) {
    colorVal += `${colorList[i % 2]} ${rotateAngle.value * i}deg ${rotateAngle.value * (i + 1)}deg,`
  }
  return `
            background: conic-gradient(${colorVal.slice(0, -1)});
          `
})
// 每个奖品布局
const prizeStyle = computed(() => {
  const _degree = rotateAngle.value
  return (i) => {
    return `
              width: ${2 * 270 * Math.sin(_degree / 2 * Math.PI / 180)}px;
              height: 180px;
              transform: rotate(${_degree * i + _degree / 2}deg);
              transform-origin:70% 90%;
            `
  }
})

onMounted(() => {
  prizeWrap.value.style = `${bgColor.value} transform: rotate(-${rotateAngle.value / 2}deg)`
})


// 获取随机数
const getRandomNum = () => {
  const num = Math.floor(Math.random() * state.prizeList.length)
  return num
}

const start = () => {
  if(count.value == 0) return showFailToast('您最多可以抽奖三次')
  count.value --;
  if (!state.isRunning) {
    state.isRunning = true

    console.log('开始抽奖，后台请求中奖奖品')
    // 请求返回的奖品编号 这里使用随机数
    const prizeId = getRandomNum()
    console.log('中奖ID>>>', prizeId, state.prizeList[prizeId])
    list.value = state.prizeList[prizeId]
    console.log(list.value);
    
    state.prizeId = prizeId
    startRun()
  }
  setTimeout(()=>{
    show.value = true

  },4000)
}

const startRun = () => {
  console.log(state.isRunning, totalRunAngle.value)
  // 设置动效
  prizeWrap.value.style = `
            ${bgColor.value}
            transform: rotate(${totalRunAngle.value}deg);
            transition: all 4s ease;
          `
  // 监听transition动效停止事件
  prizeWrap.value.addEventListener('transitionend', stopRun)
}

const stopRun = (e) => {
  console.log(e)
  state.isRunning = false
  prizeWrap.value.style = `
            ${bgColor.value}
            transform: rotate(${totalRunAngle.value - state.baseRunAngle}deg);
          `
}
//返回
const onClickLeft = () => history.back();
//中奖弹框
const show = ref(false);

</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3{
  background-color: blueviolet;
  color: white;
  text-align: center;
  position: absolute;
  top: 120px;
  left: 100px;
}

[v-cloak] {
  display: none;
}

.container {
  width: 350px;
  height: 350px;
  margin:100px  auto;
  position: relative;
}
.box{
  background-image: url('https://img1.baidu.com/it/u=2248665301,1507316444&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=550');
}
.prize-list {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #98d3fc;
  /* overflow: hidden; */
}

.prize-item {
  /* border: 2px solid red; */
  position: absolute;
  left: 0;
  right: 0px;
  top: 0px;
  /* margin: auto; */
}

.prize-item img {
 
  width: 20%;
  height: 20%;
  margin: 30px auto 10px;
  display: block;
  border-radius: 50%;
}

.prize-item p {
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
}

.btn {
  width: 60px;
  height: 60px;
  background: url('https://img2.baidu.com/it/u=81730233,3680569965&fm=253&fmt=auto&app=138&f=PNG?w=500&h=506') no-repeat center / 100% 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.btn::before {
  content: "";
  width: 41px;
  height: 39px;
  background: url('https://www.jq22.com/demo/jquerylocal201912122316/img/icon_point.png') no-repeat center / 100% 100%;
  position: absolute;
  left: 33px;
  right: 0;
  top: -33px;
  margin: auto;
}
.van-dialog{
  height: 350px;
  width: 300px;
}
</style>